.index-index {
  margin-bottom: 66px;
  //   <!-- 头部 -->
  .header {
    height: 44px;
    padding: 0 20px;
    .l {
      font-size: 20px;
    }
    .r {
      font-size: 18px;
      img {
        width: 18px;
        height: 18px;
        margin-left: 10px;
      }
    }
  }
  //   <!-- Unnamed (动态面板) -->
  .unnamed {
    padding: 20px;
    .content {
      margin: 0 auto;
      height: 120px;
      background: linear-gradient(
        135deg,
        rgb(0, 204, 255) 0%,
        rgb(0, 204, 255) 0%,
        rgb(37, 97, 239) 100%,
        rgb(37, 97, 239) 100%
      );
      border: none;
      border-radius: 12px;
      box-shadow: rgb(41 132 248 / 10%) 0px 0px 15px;
      padding: 0 10px;
      .l {
        .text1 {
          font-size: 20px;
          color: #fff;
          font-weight: 600;
        }
        .text2 {
          font-size: 12px;
          color: #ffffffaa;
          font-weight: 600;
          margin-top: 10px;
        }
      }
      .r {
        img {
          width: 90px;
          height: 90px;
        }
      }
    }
  }
  // <!-- 待办提醒 -->
  .wait {
    padding: 0 20px;
    .list {
      margin: 0 auto 10px;
      min-height: 100px;
      border-radius: 12px;
      padding: 15px;
      line-height: 1.5;
      .t {
        font-size: 18px;
        .text {
          font-size: 12px;
          color: #cccccc;
        }
      }
      .item {
        border-bottom: 1px solid #ededed;
        font-size: 12px;
        color: #cccccc;
        .top {
          padding: 5px 0;
          .text {
            font-size: 14px;
            color: #333333;
          }
          .text1 {
            color: #999;
          }
        }
        .buttom {
          padding-bottom: 5px;
          img {
            width: 8px;
            height: 8px;
          }
        }
      }
    }
  }
  // <!-- 主要的 -->
  .main {
    padding: 0 20px 20px;
    .list {
      margin: 0 auto 10px;
      min-height: 100px;
      border-radius: 12px;
      padding: 15px;
      .t {
        font-size: 20px;
      }
      .c {
        .item {
          margin-right: calc((100% - 176px) / 3);
          width: 44px;
          .rgba1 {
            background-color: rgba(37, 97, 239, 0.2);
          }
          .rgba2 {
            background-color: rgba(250, 116, 107, 0.2);
          }
          .rgba3 {
            background-color: rgba(61, 212, 167, 0.2);
          }
          .rgba4 {
            background-color: rgba(255, 199, 28, 0.2);
          }
          .color1 {
            color: #2561ef;
          }
          .color2 {
            color: #fa827a;
          }
          .color3 {
            color: #3dd4a7;
          }
          .color4 {
            color: #fddb78;
          }
          .text-box {
            margin: 15px 0;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            line-height: 44px;
            i {
              font-size: 22px;
            }
          }
          span {
            font-size: 12px;
            white-space: nowrap;
          }
        }
        .item:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
  }
  // <!-- 底部 -->
  .footer {
    position: fixed;
    bottom: 0;
    height: 66px;
    width: 100%;
    font-size: 12px;
    padding: 10px 0;
    .text {
      flex: 1;
      i {
        font-size: 18px;
      }
    }
  }
}
